<template>
    <div class="uLike flex" v-for="(item, index) in getData" :key="index">
        <div class="uLike-image">
            <el-image :src="getImageUrl(item.image)" style="width: 100px; height: 100px" />
        </div>
        <div class="content">
            <div class="title">{{ item.title }}</div>
            <div class="info-one">
                <span class="price">{{ item.price }}</span>
                <span class="unit">/{{ item.unit }}</span>
                <span class="originPrice">{{ item.originPrice }}</span>
                <span class="discounts-bg">
                    <span class="discounts">省{{ item.discounts }}元</span>
                </span>
            </div>
            <div class="info-two">
                <span>{{ item.desc }}</span>
                <span class="mx-1">|</span>
                <span class="people">{{ item.people }}</span
                >已下单
            </div>
            <div class="flex justify-between">
                <div class="limit">限购 {{ item.limitNum }} 份</div>
                <div class="shopCart">
                    <span class="text">加入购物车</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type options from './options'
import useAppStore from '@/stores/modules/app'

const { getImageUrl } = useAppStore()
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})
const getData = computed(() => {
    const { data } = props.content
    return data
})
</script>

<style lang="scss" scoped>
.uLike {
    margin: 10px 10px 0;
    background-color: #fff;
    border-radius: 7px;

    .uLike-image {
        padding: 10px;
    }

    .content {
        .title {
            padding: 8px 8px 0 0;
        }
        .info-one {
            font-size: 12px;
            padding: 8px 0 2px;
            .price {
                color: #ff2c3c;
            }
            .unit {
                color: #999;
            }
            .originPrice {
                color: #999;
                text-decoration: line-through;
                margin-left: 10px;
                margin-right: 8px;
            }
            .discounts-bg {
                background: #ffe5bc;
                border-radius: 10px;
                .discounts {
                    font-weight: 400;
                    color: #f79c0c;
                    padding: 2px 8px;
                }
            }
        }
        .info-two {
            font-size: 12px;
            color: #999;
            padding-bottom: 8px;
            .people {
                color: black;
            }
        }
        .limit {
            font-size: 12px;
            color: #666;
            margin-top: 9px;
        }
        .shopCart {
            position: absolute;
            right: 20px;
            border-radius: 22px;
            background: #33d192;
            padding: 5px 9px;
            .text {
                font-size: 12px;
                color: #fff;
            }
        }
    }
}
</style>
